<template>
  <div class="dashboard-container">
    <div style="font-weight: 700; padding: 20px">2025</div>
    <!-- 顶部统计卡片 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="card-content">
            <div class="card-icon user-add">
              <el-icon><User /></el-icon>
            </div>
            <div class="card-info">
              <span class="label">新增用户</span>
              <span class="value">{{ newAddUser }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="card-content">
            <div class="card-icon user-visit">
              <el-icon><View /></el-icon>
            </div>
            <div class="card-info">
              <span class="label">总用户量</span>
              <span class="value">{{ totalUser }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <!-- 更多统计卡片... -->
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="card-content">
            <div class="card-icon user-addhole">
              <el-icon><Plus /></el-icon>
            </div>
            <div class="card-info">
              <span class="label">新增坑洞</span>
              <span class="value">{{ newAddHole }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="card-content">
            <div class="card-icon user-sumhole">
              <el-icon><Warning /></el-icon>
            </div>
            <div class="card-info">
              <span class="label">坑洞总数</span>
              <span class="value">{{ totalHole }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <div ref="userChart" class="chart-container"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div ref="accessChart" class="chart-container"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 坑洞状态图表 -->
    <el-row>
      <el-col :span="24">
        <el-card>
          <div ref="potholeChart" class="chart-container"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import { ElCard, ElRow, ElCol, ElIcon } from 'element-plus'
import { User, View, Warning, Plus } from '@element-plus/icons-vue'
import { getHoleCount, getUserCount, getHolePie } from '@/api/data'
const userChart = ref(null)
const accessChart = ref(null)
const potholeChart = ref(null)
const newAddUser = ref(0) // 新增用户数量
const totalUser = ref(0) // 总用户数量
const newAddHole = ref(0) // 新增坑洞数量
const totalHole = ref(0) // 总坑洞数量
const dateList = ref([]) // 日期列表
const dataUserList = ref([]) // 用户数据列表
const dataHoleList = ref([]) // 访问数据列表
const dataHoleSumList = ref([]) // 坑洞状态数据列表
const dataHolePieList = ref([]) // 坑洞状态数据列表

// 初始化用户增长图表
const initUserChart = () => {
  const chart = echarts.init(userChart.value)
  const option = {
    title: { text: '用户增长趋势' },
    tooltip: { trigger: 'axis' },
    xAxis: {
      type: 'category',
      data: dateList.value,
    },
    yAxis: { type: 'value' },
    series: [
      {
        data: dataUserList.value,
        type: 'line',
        smooth: true,
      },
    ],
  }
  chart.setOption(option)
}

// 初始化访问量图表
const initAccessChart = () => {
  const chart = echarts.init(accessChart.value)
  const option = {
    title: { text: '新增坑洞统计' },
    tooltip: { trigger: 'axis' },
    xAxis: {
      type: 'category',
      data: dateList.value,
    },
    yAxis: { type: 'value' },
    series: [
      {
        data: dataHoleList.value,
        type: 'bar',
        barWidth: '60%',
      },
    ],
  }
  chart.setOption(option)
}

// 初始化坑洞状态图表
const initPotholeChart = () => {
  const chart = echarts.init(potholeChart.value)
  const option = {
    title: { text: '坑洞状态分布' },
    tooltip: { trigger: 'item' },
    legend: { top: 'bottom' },
    series: [
      {
        name: '坑洞状态',
        type: 'pie',
        radius: '50%',
        data: [
          { value: dataHolePieList.value[0].count, name: '严重', itemStyle: { color: '#f56c6c' } },
          { value: dataHolePieList.value[1].count, name: '中等', itemStyle: { color: ' #e6a23c' } },
          { value: dataHolePieList.value[2].count, name: '轻微', itemStyle: { color: ' #67c23a' } },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  }
  chart.setOption(option)
}

onMounted(async () => {
  const params_hole = {
    begin: '2025-03-07',
    end: '2025-03-13',
  }
  const params_user = {
    begin: '2025-03-07',
    end: '2025-03-13',
  }

  const hole_res = await getHoleCount(params_hole)
  const user_res = await getUserCount(params_user)
  const holePie_res = await getHolePie()

  dataHolePieList.value = holePie_res.data.data

  newAddUser.value = user_res.data.data.newUserCount
  totalUser.value = user_res.data.data.totalUserCount
  newAddHole.value = hole_res.data.data.newUserCount
  totalHole.value = hole_res.data.data.totalUserCount
  dataUserList.value = user_res.data.data.newUserList.split(',')
  dataHoleList.value = hole_res.data.data.newUserList.split(',')
  dataHoleSumList.value = hole_res.data.data.totalUserList.split(',')
  //取2025-03-07中的03-07
  dateList.value = hole_res.data.data.dateList.split(',').map((item) => item.slice(5))

  initUserChart()
  initAccessChart()
  initPotholeChart()

  // 窗口变化时自适应
  window.addEventListener('resize', () => {
    echarts.getInstanceByDom(userChart.value)?.resize()
    echarts.getInstanceByDom(accessChart.value)?.resize()
    echarts.getInstanceByDom(potholeChart.value)?.resize()
  })
})
</script>

<style scoped>
.dashboard-container {
  padding: 10px;
  height: 100px;
}

.stat-card {
  margin-bottom: 20px;
}

.card-content {
  display: flex;
  align-items: center;
}

.card-icon {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  margin-right: 20px;
}

.user-add {
  background: #f0f9eb;
  color: #67c23a;
}
.user-visit {
  background: #fdf6ec;
  color: #e6a23c;
}
.user-addhole {
  background: #f56c6c;
  color: #fff;
}
.user-sumhole {
  background: #e6a23c;
  color: #fff;
}

.card-info {
  display: flex;
  flex-direction: column;
}

.label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.value {
  font-size: 24px;
  font-weight: bold;
}

.chart-container {
  width: 100%;
  height: 400px;
}
</style>
